<template>
  <el-dialog
    v-loading="loading"
    :visible.sync="dialog"
    :close-on-click-modal="false"
    :title="title"
    width="85%"
    @close="cancel"
    @opened="initPaneData"
  >
    <div class="app-container">
      <el-row>
        <el-col :span="24">
          <activeStep v-if="showActiveSetp" ref="activeStep" :parent="iparent" />
          <typeStep v-if="showTypeStep" ref="typeStep" :parent="iparent" />
        </el-col>
      </el-row>
      <el-row style="padding-top:5px;">
        <el-col :span="24">
          <span>
            <span>采购ID:</span>
            <span>
              <el-select v-model="buyerId" style="width: 280px;" size="mini" clearable>
                <el-option v-for="bid in buyerList" :key="bid" :label="bid" :value="bid" />
              </el-select>
            </span>
            <span v-if="showReadInfo">
              <span>商品号:</span>
              <span>
                <el-input v-model="itemNbr" size="mini" style="width: 200px;" clearable />
              </span>
            </span>
          </span>
          <span>
            <el-button size="mini" type="primary" style="float:right;" round @click="doSubmit">保存</el-button>
            <el-button v-if="showReadInfo" size="mini" type="primary" style="float:right;" round @click="doReadInfo">获取Item信息</el-button>
          </span>
        </el-col>
      </el-row>
      <div style="padding-top:10px">
        <el-tabs v-model="activeName" type="border-card">
          <el-tab-pane label="inputSheet" name="inputSheet">
            <inputSheetForm ref="inputSheetForm" :parent="iparent" />
          </el-tab-pane>
          <el-tab-pane label="附件表" name="mps">
            <mpsFileForm ref="mpsFileForm" />
          </el-tab-pane>
          <el-tab-pane label="Price OB" name="price">
            <priceForm ref="priceForm" :iparent="iparent" />
          </el-tab-pane>
          <el-tab-pane label="IGRO Form" name="igroForm">
            <igroForm ref="igroForm" />
          </el-tab-pane>
          <el-tab-pane label="Ftag Form" name="ftagForm">
            <ftagForm ref="ftagForm" />
          </el-tab-pane>
          <el-tab-pane label="CPK&Unit" name="cpkUnit">
            <cpkAndUnitForm ref="cpkAndUnitForm" />
          </el-tab-pane>
          <el-tab-pane label="PB竞品商品信息" name="pb">
            <pbItemForm ref="pbItemForm" />
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
  </el-dialog>
</template>

<script>
import inputSheetForm from '@/views/active-item/sheet/inputSheet-active'
import priceForm from '@/views/active-item/sheet/price'
import igroForm from '@/views/new-item/sheet/igro'
import ftagForm from '@/views/new-item/sheet/ftag'
import cpkAndUnitForm from '@/views/new-item/sheet/cpkAndUnit'
import pbItemForm from '@/views/new-item/sheet/pbItem'
import mpsFileForm from '@/views/active-item/sheet/mpsFile'
import activeStep from '@/views/active-item/step/active-step'
import typeStep from '@/views/active-item/step/type-step'
import { queryItemByItemNbr } from '@/api/active-item'
import { Message } from 'element-ui'
import common from '@/api/active-global'
import { getBuyerIdList } from '@/api/api'
import { save, initPanel } from '@/utils/activeItemUtil'

export default {
  components: { inputSheetForm, priceForm, igroForm, ftagForm, cpkAndUnitForm, pbItemForm, mpsFileForm, activeStep, typeStep },
  props: {
    parent: {
      type: Object,
      default: null
    }
  },
  data() {
    return {
      dialog: false,
      itemInfo: {},
      loading: false,
      id: '',
      itemStatus: common.ITEM_STATUS_BUYER_ADD,
      iparent: this,
      title: '',
      activeName: 'inputSheet',
      buyerId: null,
      buyerList: [],
      itemNbr: ''
    }
  },
  computed: {
    showActiveSetp: function() {
      return this.parent.changeType === common.itemStatus
    },
    showTypeStep: function() {
      return this.parent.changeType === common.itemType
    },
    showReadInfo() {
      return this.id === undefined || this.id === null || this.id === ''
    }
  },
  created: function() {
    this.loadBuyer()
  },
  methods: {
    loadBuyer() {
      getBuyerIdList().then((res) => {
        if (res) {
          this.buyerList = res
          if (this.buyerId === null || this.buyerId === '') {
            this.buyerId = res[0]
          }
        }
      })
    },
    // 读取Item 信息
    doReadInfo() {
      if (this.itemNbr === undefined || this.itemNbr === null || this.itemNbr === '') {
        Message({
          message: '请填写商品号！',
          type: 'warning',
          duration: 3 * 1000
        })
      } else {
        this.loading = true
        const itemNbr = []
        itemNbr.push(this.itemNbr)
        queryItemByItemNbr(itemNbr).then(res => {
          if (res && res.length > 0) {
            this.itemInfo = res[0]
            this.$refs.inputSheetForm.itemInfo = res[0]
          } else {
            Message({
              message: '无效商品号！',
              type: 'warning',
              duration: 3 * 1000
            })
          }
          this.loading = false
        }, (error) => {
          console.log(error)
          this.loading = false
        })
      }
    },
    // 保存触发
    doSubmit() {
      save(this, true)
    },
    cancel() {
      this.itemInfo = {}
      this.loading = false
      this.id = ''
      this.itemStatus = common.ITEM_STATUS_BUYER_ADD
      this.initPaneData()
      this.itemNbr = ''
    },
    // 初始化加载
    initPaneData() {
      initPanel(this)
    }
  }
}
</script>

